<template>
  <div>

    <div v-if="!item.children" class="--++" @click="sendParameter(item.id, item.pid, 1)">
      <el-menu-item :index="item.label">
        <div class="titel-row">
          <div class="label-tag">{{ item.label | handleTag }}</div>
          <span style="flex-grow: 1; padding-left: 10px">{{ item.label }}</span>
          <el-checkbox v-if="!isInquire" v-model="checkbox_bool"></el-checkbox>
        </div>
      </el-menu-item>
    </div>

    <el-submenu v-else :index="item.label">
      <template slot="title">
        <div class="titel-row" @click="sendParameter(item.id, item.pid, 0)">
          <div>
            <i
              class="el-icon-arrow-right arrow-icon"
              :style="{ transform: defaultOpeneds.includes(item.label) ? 'rotate(0.25turn)' : 'rotate(0)' }"
            />
            <span>{{ item.label }}</span>
          </div>
          <i v-if="!isInquire" class="el-icon-s-operation" @click.stop="clickIcon"></i>
        </div>
      </template>

      <template v-if="item.children">
        <SideItem v-for="child in item.children" :key="child.label" :item="child"
                  :defaultOpeneds="defaultOpeneds" v-bind="$attrs" v-on="$listeners"
        />
      </template>

      <!-- <div class="three-btn-container">
          <el-button type="danger">取消关注</el-button>
          <el-button size="mini" style="padding: 5px">对比</el-button>
          <el-button size="mini" style="padding: 5px">取消</el-button>
      </div> -->
    </el-submenu>
  </div>
</template>

<script>
export default {
  name: 'SideItem',
  props: {
    item: { default: () => ({}) },
    defaultOpeneds: { default: () => [] }
  },
  computed: {
    // 是否在`职责查询页` 传入 `true` or `false`
    isInquire() {
      return this.$attrs.isInquire
    }
  },
  filters: {
    handleTag(str) {
      const len = str.length
      return len > 2 ? str.substring(len - 2) : str
    }
  },
  data() {
    return {
      checkbox_bool: true
    }
  },
  methods: {
    clickIcon() {
    },
    sendParameter(id, pid, type) {
      this.$emit('handleDuty', { id, pid, type })
    }
  }
}
</script>

<style>
/* i {
  color: #aaa !important;
} */
</style>

<style lang="scss" scoped>
::v-deep .el-menu-item {
  padding-right: 25px;
}

.side-container {
  // width: 240px;
  background-color: #fff;

  padding: 15px;
}

.gray-line {
  height: 1px;
  background-color: #eee;
}

.titel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.arrow-icon {
  transition: 0.2s;
}

.three-btn-container {
  display: flex;
  justify-content: flex-end;

  padding: 5px 25px 5px 0;
}

.label-tag {
  flex-shrink: 0;
  background-image: linear-gradient(180deg, #f1bc57, #f9ac79);
  border-radius: 5px;
  box-shadow: 0px 4px 6px 0px rgba(209, 209, 209, 0.5);
  width: 40px;
  height: 40px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
